<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="admin/include :: header('新增用户')" />
	<th:block th:include="admin/include :: select2-css" />
</head>
<body>
<div class="main-content">
	<form id="form-user-add" class="form-horizontal">
		<input name="deptId" type="hidden" id="treeId"/>
		<h4 class="form-header h4">基本信息</h4>
		<div class="row">
			<div class="col-sm-6">
				<div class="form-group">
					<label class="col-sm-4 control-label is-required">用户名称：</label>
					<div class="col-sm-8">
						<input name="name" placeholder="请输入用户名称" class="form-control" type="text" maxlength="30" required>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-6">
				<div class="form-group">
					<label class="col-sm-4 control-label">手机号码：</label>
					<div class="col-sm-8">
						<div class="input-group">
							<input id="phonenumber" name="phonenumber" placeholder="请输入手机号码" class="form-control" type="text" maxlength="11">
							<span class="input-group-addon"><i class="fa fa-mobile"></i></span>
						</div>
					</div>
				</div>
			</div>
			<div class="col-sm-6">
				<div class="form-group">
					<label class="col-sm-4 control-label">邮箱：</label>
					<div class="col-sm-8">
						<div class="input-group">
							<input id="email" name="email" class="form-control email" type="text" maxlength="50" placeholder="请输入邮箱">
							<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-6">
				<div class="form-group">
					<label class="col-sm-4 control-label is-required">登录账号：</label>
					<div class="col-sm-8">
						<input id="loginName" name="loginName" placeholder="请输入登录账号" class="form-control" type="text" maxlength="30" required>
					</div>
				</div>
			</div>
			<div class="col-sm-6">
				<div class="form-group">
					<label class="col-sm-4 control-label is-required">登录密码：</label>
					<div class="col-sm-8">
						<div class="input-group">
							<input id="password" name="password" placeholder="请输入登录密码" class="form-control" type="password" required>
							<span class="input-group-addon" title="登录密码,鼠标按下显示密码"
								  onmousedown="$('#password').attr('type','text')"
								  onmouseup="$('#password').attr('type','password')"><i class="fa fa-key"></i></span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-6">
				<div class="form-group">
					<label class="col-sm-4 control-label">用户性别：</label>
					<div class="col-sm-8">
						<select name="sex" class="form-control m-b">
							<option value="0">男</option>
							<option value="1">女</option>
						</select>
					</div>
				</div>
			</div>
			<div class="col-sm-6">
				<div class="form-group">
					<label class="col-sm-4 control-label">用户状态：</label>
					<div class="col-sm-8">
						<label class="toggle-switch switch-solid">
							<input type="checkbox" id="status" checked>
							<span></span>
						</label>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-12">
				<div class="form-group">
					<label class="col-xs-2 control-label">角色：</label>
					<div class="col-xs-10">
<!--						<label th:each="role:${roles}" class="check-box">-->
<!--							<input name="role" type="checkbox" th:value="${role.roleId}" th:text="${role.roleName}" th:disabled="${role.status == '1'}">-->
<!--						</label>-->
					</div>
				</div>
			</div>
		</div>
		<h4 class="form-header h4">其他信息</h4>
		<div class="row">
			<div class="col-sm-12">
				<div class="form-group">
					<label class="col-xs-2 control-label">备注：</label>
					<div class="col-xs-10">
						<textarea name="remark" maxlength="500" class="form-control" rows="3"></textarea>
					</div>
				</div>
			</div>
		</div>
	</form>
</div>

<div class="row">
	<div class="col-sm-offset-5 col-sm-10">
		<button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
		<button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
	</div>
</div>
<th:block th:include="admin/include :: footer" />
<th:block th:include="admin/include :: select2-js" />
<script>
	var prefix = ctx + "admin/system/user";

	$("#form-user-add").validate({
		onkeyup: false,
		rules:{
			loginName:{
				minlength: 2,
				maxlength: 20,
				remote: {
					url: prefix + "/checkLoginNameUnique",
					type: "post",
					dataType: "json",
					data: {
						"loginName": function() {
							return $.common.trim($("#loginName").val());
						}
					},
					dataFilter: function(data, type) {
						return $.validate.unique(data);
					}
				}
			},
			password:{
				minlength: 5,
				maxlength: 20
			},
		},
		messages: {
			"loginName": {
				remote: "用户已经存在"
			},
		},
		focusCleanup: true
	});

	function submitHandler() {
		if ($.validate.form()) {
			var data = $("#form-user-add").serializeArray();
			var status = $("input[id='status']").is(':checked') == true ? 0 : 1;
			var roleIds = $.form.selectCheckeds("role");
			var postIds = $.form.selectSelects("post");
			data.push({"name": "status", "value": status});
			data.push({"name": "roleIds", "value": roleIds});
			data.push({"name": "postIds", "value": postIds});
			$.operate.saveTab(prefix + "/add", data);
		}
	}

	function doSubmit(index, layero){
		var body = $.modal.getChildFrame(index);
		$("#treeId").val(body.find('#treeId').val());
		$("#treeName").val(body.find('#treeName').val());
		$.modal.close(index);
	}

	$(function() {
		$('#post').select2({
			placeholder: "请选择岗位",
			allowClear: true
		});
	})
</script>
</body>
</html>